<template>
    <van-popup
        v-model="isShow"
        position="bottom"
        :style="{ height: '257px' }"
        class="date-picker-container"
        safe-area-inset-bottom
        @close="close"
    >
        <van-datetime-picker
            v-model="currentDate"
            type="date"
            :min-date="minDate"
            :max-date="maxDate"
            :formatter="formatter"
        >
            <template #default>
                <span class="title">{{ title }} </span>
            </template>
        </van-datetime-picker>
        <van-button class="button" @click="onSelect">确认</van-button>
    </van-popup>
</template>

<script>
import Vue from "vue";
import { Popup, DatetimePicker, Button } from "vant";

Vue.use(Popup);
Vue.use(DatetimePicker);
Vue.use(Button);

export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: "选择开始日期",
        },
        minDate: {
            type: Date,
            default: () => new Date(2013, 0, 1),
        },
        maxDate: {
            type: Date,
            default: () => new Date(2033, 0, 1),
        },
    },
    data() {
        return {
            isShow: false,
            // minDate: new Date(2013, 0, 1),
            // maxDate: new Date(2033, 0, 1),
            currentDate: new Date(),
        };
    },
    watch: {
        show(val) {
            this.isShow = val;
        },
        defaultDate(val) {
            this.currentDate = val;
        },
    },
    created() {},
    mounted() {},
    methods: {
        formatter(type, val) {
            if (type === "year") {
                return `${val}年`;
            } else if (type === "month") {
                return `${val}月`;
            } else if (type === "day") {
                return `${val}日`;
            }
            return val;
        },
        onSelect() {
            this.$emit("confirm", this.currentDate);
        },
        close() {
            this.$emit("close");
        },
    },
};
</script>

<style lang="less" scoped>
.date-picker-container {
    width: 100%;
    height: 257px;
    background: #ffffff;
    border-radius: 16px 16px 0px 0px;
    padding: 0 20px 17px 20px;
    box-sizing: border-box;
    overflow-y: hidden;

    .title {
        width: 100%;
        text-align: center;
    }
    .button {
        width: 100%;
        height: 42px;
        background: linear-gradient(180deg, #f34651 0%, #d61c22 100%);
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.06);
        border-radius: 21px;
        font-size: 14px;
        font-weight: 400;
        color: #ffffff;
        line-height: 42px;
    }
}
</style>
<style lang="less">
.date-picker-container {
    .van-picker {
        height: 200px;
        overflow-y: hidden;
    }
}
</style>
